<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="易道堂" v-if="1" :border-bottom="false">
			<!-- <view class="slot-wrap padding-lr"><text class="f40 text-bold text-black">TALK社区</text></view> -->
		</u-navbar>

		<view class="content_box">
			<view class="padding-lr padding-top-sm">
				<u-search placeholder="搜索关键字" v-model="key_words" @search="srchFor" @clear="clear" @change="change" @custom="srchFor"></u-search>
			</view>
			<block v-if="srchHsst">
				<view class="padding-lr padding-top flex flex-direction">
					<view class="padding-top"><text class="f32 text-bold text-black">搜索历史</text></view>
				</view>
				<view class="flex padding flex-wrap">
					<block v-for="(item, index) in hstData" :key="index">
						<text class="cu-tag bg-gray light f24 round margin-bottom" @click="historicalClk(item.search_content)">
							{{ item.search_content }}
						</text>
					</block>
				</view>
			</block>

			<view class="padding" v-if="info">
				<block v-for="(item, index) in list" :key="index">
					<view class="ww100 h342 bg-white u-relative" @click="l.to('/pages/index/evntDetails?id=' + item.id)">
						<u-lazy-load :image="item.image_url" mode="aspectFill" class="ww100 h342" imgMode="aspectFill" height="342"></u-lazy-load>
						<image src="../../static/mianfei.png" mode="aspectFill" class="w100 h50 bgimg"></image>
					</view>
					<view class="mt28">
						<text class="f28 text-bold">{{ item.title }}</text>
					</view>
					<view class="flex justify-between align-center mt28">
						<view class="flex align-center ">
							<image src="../../static/time.png" mode="" class="w26 h26"></image>
							<text class="f26 text-gray ml10 block " style="width: 70vw; overflow: scroll; white-space: nowrap;">
								活动时间：{{ item.show_time }}
							</text>
						</view>
						<view class="padding-tb-xs padding-lr-sm round bolck" style="background-color: #fff2f1">
							<text class="f24" style="color: #f2736d">{{ item.status }}</text>
						</view>
					</view>
					<view class="mt28 flex align-center mb40">
						<image src="../../static/dui.png" mode="aspectFill" class="w26 h26"></image>
						<text class="f26 text-green ml10">您的路演申请通过，请按时与会</text>
					</view>
				</block>
			</view>
			<view class="flex align-center justify-center" style="height: 60vh" v-if="empty">
				<view class="flex flex-direction justify-center align-center animation-scale-up">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210621132140.png" mode="aspectFill" class="w290 h290 "></image>
					<text class="text-gray f28 mt35">未搜索到相关内容</text>
				</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			key_words: '',
			page: 1,
			page_size: 10,
			empty: false,
			srchHsst: true,
			info: false,
			list: [],
			hstData: [],
		};
	},
	onShow() {},
	onLoad(e) {
		this.srchHst();
	},
	watch: {
		srchHsst(newValue, oldValue) {
			if (newValue) {
				this.srchHst();
			}
		},
	},
	methods: {
		async srchHst() {
			let obj = {
				// uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post('index/searchTags', obj, {});
			this.hstData = res.data;
			console.log('res >>  ', res);
		},
		async clear() {
			[this.empty, this.srchHsst, this.info] = [false, true, false];
		},
		async change(e) {
			!e.length && ([this.empty, this.srchHsst, this.info] = [false, true, false]);
		},
		async historicalClk(e) {
			this.key_words = e;
			this.srchFor();
			console.log('e :>> ', e);
		},
		async srchFor() {
			let obj = {
				key_words: this.key_words,
				page: this.page,
				page_size: this.page_size,
			};
			const res = await this.$u.post('index/search', obj, {});
			if (!res.data.list.length) {
				return ([this.empty, this.srchHsst, this.info] = [true, false, false]);
			}
			[this.empty, this.srchHsst, this.info] = [false, false, true];
			this.list = res.data.list;
		},
	},
};
</script>

<style lang="scss" scoped>
.content_box {
	.bgimg {
		position: absolute;
		top: 0;
		left: 0;
		// transform: translateX(-50%);
	}
}
</style>
